<template>
  <div>
    <!-- <Menu items="{router}" /> -->
    <a-button
      type="primary"
      style="margin-bottom: 16px"
      @click="toggleCollapsed"
    >
      <MenuUnfoldOutlined v-if="state.collapsed" />
      <MenuFoldOutlined v-else />
    </a-button>
    <a-menu
      v-model:openKeys="state.openKeys"
      v-model:selectedKeys="state.selectedKeys"
      mode="inline"
      :inline-collapsed="state.collapsed"
      :items="items"
      style="border: none; font-size: smaller"
      @click="onClick"
    ></a-menu>
  </div>
</template>
<script lang="ts" setup>
import { reactive, watch, h } from "vue";

// import { Menu } from "antd";

// const [router] = useState(router_item);
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from "@ant-design/icons-vue";
import { routes } from "@/router/routes";
import { useRouter } from "vue-router";
const router = useRouter();
const state = reactive({
  collapsed: false,
  selectedKeys: ["1"],
  openKeys: ["sub1"],
  preOpenKeys: ["sub1"],
});
const items = reactive([
  {
    key: "/admin/A",
    icon: () => h(PieChartOutlined),
    label: "仪表盘",
    title: "dd",
  },
  {
    key: "/admin/B",
    icon: () => h(DesktopOutlined),
    label: "常用设置",
    title: "Option 2",
  },
  {
    key: "sub1",
    icon: () => h(MailOutlined),
    label: "常用设置",
    title: "Navigation One",
    children: [
      {
        key: "/admin/C",
        label: "用户管理",
        title: "Option 5",
      },
      {
        key: "6",
        label: "公告管理",
        title: "Option 6",
      },
      {
        key: "7",
        label: "系统配置",
        title: "Option 7",
      },
      {
        key: "8",
        label: "判题服务器",
      },
      {
        key: "9",
        label: "测试用例",
      },
    ],
  },
  {
    key: "sub2",
    icon: () => h(AppstoreOutlined),
    label: "问题",
    title: "Navigation Two",
    children: [
      {
        key: "10",
        label: "问题列表",
        title: "Option 9",
      },
      {
        key: "11",
        label: "增加题目",
        title: "Option 10",
      },
      {
        key: "12",
        label: "导入/导出题目",
      },
    ],
  },
  {
    key: "sub3",
    icon: () => h(AppstoreOutlined),
    label: "比赛&练习",
    title: "Navigation Two",
    children: [
      {
        key: "13",
        label: "比赛列表",
        title: "Option 9",
      },
      {
        key: "11",
        label: "创建比赛",
        title: "Option 10",
      },
    ],
  },
]);
watch(
  () => state.openKeys,
  (_val, oldVal) => {
    state.preOpenKeys = oldVal;
  }
);
const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
const onClick = function (key) {
  console.log(key.key);

  // console.log(router.push(key));
  // 对象
  router.push({ path: key.key });
};
</script>
